const path = require('path')
const TerserWebpackPlugin = require('terser-webpack-plugin') // 直接引入，无需下载
// const CompressionWebpackPlugin = require('compression-webpack-plugin') // 开启gzip压缩,需要下载 npm i compression-webpack-plugin -D(若版本过高请降低版本重新卸载下载)
const resolve = dir => path.join(__dirname, dir)
const isProduction = process.env.NODE_ENV === 'prod'

module.exports = {
  lintOnSave: false,
  devServer: {
    port: 8088,
    host: '0.0.0.0',
    open: true
  },
  configureWebpack: config => {
    // 添加快捷键
    const newAlias = {
      '@': resolve('src'),
      '@img': resolve('src/assets/img')
    }
    Object.assign(config.resolve.alias, newAlias)

    if (isProduction) {
      // 去除debugger、console.log及注释
      config.plugins.push(
        new TerserWebpackPlugin({
          parallel: true, // 使用多进程并发运行
          terserOptions: {
            compress: {
              drop_console: true, //传true就是干掉所有的console.*这些函数的调用.
              drop_debugger: true, //干掉那些debugger;
              pure_funcs: ['console.log'] // 如果你要干掉特定的函数比如console.info ，又想删掉后保留其参数中的副作用，那用pure_funcs来处理
            }
          }
        })
      )

      // 开启gzip打包（需要服务端配合）
      // config.plugins.push(
      //   new CompressionWebpackPlugin({
      //     test: /\.js$|\.html$|\.css$|\.scss$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型
      //     threshold: 10240, // 归档需要进行压缩的文件大小最小值，我这个是10K以上的进行压缩
      //     deleteOriginalAssets: false // 是否删除原文件
      //   })
      // )
    }
  },
  chainWebpack: config => {
    config.resolve.symlinks(true)
    // 修改index.html文件
    config.plugin('html').tap(args => {
      args[0].title = 'H5模板'
      return args
    })

    // 配置svg
    config.module.rules.delete('svg') // 重点:删除默认配置中处理svg,
    config.module
      .rule('svg-sprite-loader')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/svg')) // 处理svg目录
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })

    // 使用webpack-bundle-analyzer分析报文件，找出最占用空间的插件有哪些，对应做出优化(看完之后要注释掉)：下载npm install webpack-bundle-analyzer -D
    // config.plugin('webpack-bundle-analyzer').use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
  },
  css: {
    extract: false,
    loaderOptions: {
      // 配置sass，使项目中能够使用sass定义的全局变量及mixin混合函数
      sass: {
        prependData: '@import "~@/assets/style/index.scss";'
      },
      // 移动端自适应(注意：写在行业标签中style中的px不会转换为rem！！！！！！)
      postcss: {
        plugins: [
          // postcss-pxtorem 与 postcss-plugin-px2rem 推荐使用后者（因为 postcss-plugin-px2rem 这个插件 配置选项上有 exclude 属性，它可以配置 是否对 某个文件夹下的所有css文件不进行从px到rem的转换。）
          require('postcss-plugin-px2rem')({
            rootValue: 37.5, // 换算基数， 默认100
            unitPrecision: 5, // 允许REM单位增长到的十进制数字。
            propWhiteList: [], // 默认值是一个空数组，这意味着禁用白名单并启用所有属性。
            propBlackList: [], // 黑名单
            exclude: false, // 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            selectorBlackList: [], // 要忽略并保留为px的选择器
            ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
            replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
            mediaQuery: false, // （布尔值）允许在媒体查询中转换px。
            minPixelValue: 1 // 设置要替换的最小像素值(1px会被转rem)。 默认 0
          })
        ]
      }
    }
  }
}
